<template>
  <div id="app">
    <m-header></m-header>
    <tab></tab>
    <transition name="slide">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <player></player>
  </div>
</template>
<script>

import MHeader from 'components/m-header/m-header'
import Tab from 'components/tab/tab'
import Player from 'components/player/player'
export default {
  name: 'App',
  components: {
    MHeader,
    Tab,
    Player
  },
  data () {
    return {
      stop: false
    }
  },
  mounted () {
    let m = document.querySelector('#app')
    m.addEventListener('touchend', this.firstPlay)
  },
  methods: {
    firstPlay () {
      let music = document.querySelector('#audio')
      music.play()
      if (music.src !== '') {
        this.stop = true
      }
    }
  },
  watch: {
    stop () {
      let m = document.querySelector('#app')
      m.removeEventListener('touchend', this.firstPlay)
    }
  }
}
</script>

<style lang="stylus" scoped>
&.slide-enter-active, &.slide-leave-active
  transition: all 0.3s
&.slide-enter
  transform: translate3d(100%, 0, 0)
&.slide-leave-to
  transform: translate3d(-100%, 0, 0)
</style>
